<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS样式</title>
    <!-- 链接外部CSS样式表 -->
    <link rel="stylesheet" href="style.css" media="all" />

    <!-- 内部样式表 -->
    <style type="text/css">
        body {
            font-size: 16px;
            font-weight:bold;
        }
    </style>

</head>
<body>
    <div id="left">
        <ul>
            <li>
                <a href="#">test1</a>
                <a href="#">test2</a>
                <a href="#">test3</a>
            </li>
        </ul>
        <p data-kyo="hello"><span>hello world</span></p>
        <div><img src="" alt="" /></div>
        <a href="www.baidu.com">百度</a>
        <p class=""><span>hello world 222</span></p>
        <span>hello kyo</span>
        <p><span>hello world 3333</span></p>
    </div>

    <div id="mid">
        mid box
    </div>

    <div id="form">
    <form action="">
        <ul>
            <li>
                <!-- 内联样式 -->
                <label for="username" style="font-size:9px">用户名:</label>
                <input id="username" type="text" name="username" value="kyo" maxlength="10" />
            </li>
            <li class="list">
                <label for="password">密码:</label>
                <input type="password" name="password" required="required" />
            </li>
            <li class="list">
                <label for="email">邮箱:</label>
                <input type="email" name="email" placeholder="请输入邮箱.." />
            </li>
            <li>
                <label for="sex">性别:</label>
                <input type="radio" name="sex" value="1" checked="checked" />男
                <input type="radio" name="sex" value="0" />女
            </li>
            <li class="list">
                <label for="colors">颜色:</label>
                <input type="color" name="colors" />
            </li>
            <li>
                <label for="files">上传图片:</label>
                <input type="file" name="files" />
            </li>
            <li>
                <label for="dates">日期:</label>
                <input type="date" name="dates" autofocus="autofocus" />
            </li>
            <li>
                <label for="ranges">范围:</label>
                <input type="range" name="ranges" max="100" min="0" step="2" value="50" />
            </li>
            <li>
                <label for="insterting">兴趣:</label>
                <input type="checkbox" name="insterting" value="1" checked="checked" />电影
                <input type="checkbox" name="insterting" value="0" />音乐
                <input type="checkbox" name="insterting" value="2" />看书
                <input type="checkbox" name="insterting" value="3" />跑步
                <input type="checkbox" name="insterting" value="4" />漫画
            </li>
            <li>
                <label for="years">出生年:</label>
                <select id="" name="years">
                    <option value="2000">2000</option>
                    <option value="2001">2001</option>
                    <option value="2002">2002</option>
                    <option value="2003">2003</option>
                    <option value="2004">2004</option>
                </select>
            </li>
            <li>
                <label for="autocomp">自动完成:</label>
                <input type="text" autocomplete="on" list="browsers" />
                <datalist id="browsers">
                    <option value="Internet Explorer" />
                    <option value="Firefox" />
                    <option value="Google Chrome" />
                    <option value="Opera" />
                    <option value="Safari" />
                </datalist>
            </li>
            <li>
                <label for="remark">备注:</label>
                <textarea id="" name="" cols="30" rows="10"></textarea>
            </li>
            <li>
                <input type="submit" value="提交表单" />
                <input type="reset" value="重新填写" />
                <input type="button" value="返回上一级" />
            </li>
        </ul>
    </form>
    </div>

</body>
</html>
